<template>
    <div id="column" style="height:100%;width: 100%;">
    </div>
</template>

<script>
import * as echarts from 'echarts/core';
import {
    TooltipComponent,
    GridComponent,
    LegendComponent
} from 'echarts/components';
import { LineChart, BarChart, PictorialBarChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { onMounted } from 'vue';
echarts.use([
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    BarChart,
    PictorialBarChart,
    CanvasRenderer,
    UniversalTransition
]);
export default {
    setup() {
        onMounted(() => {
            cloumEchart()
        })
        // 象形柱状图
        const cloumEchart = () => {
            if (document.getElementById('column') == null) {
                return
            }
            echarts.dispose(document.getElementById('column'))
            var chartDom = document.getElementById('column');
            var myChart = echarts.init(chartDom);
            var option;

            // Generate data
            let category = [];
            let dottedBase = +new Date();
            let lineData = [];
            let barData = [];
            for (let i = 0; i < 20; i++) {
                let date = new Date((dottedBase += 3600 * 24 * 1000));
                category.push(
                    [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
                );
                let b = Math.random() * 200;
                let d = Math.random() * 200;
                barData.push(b);
                lineData.push(d + b);
            }
            // option
            option = {
                backgroundColor: '#5c9bdb5a',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['业主服务均数', '业主需求解决率'],
                    textStyle: {
                        color: '#ccc'
                    }
                },
                xAxis: {
                    data: category,
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    }
                },
                yAxis: {
                    splitLine: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                    min: 400,
                    max: 0,
                    interval: 80,
                },
                grid: {
                    top: 60,
                    left: 50,
                    right: 30,
                    height: 120,
                },
                series: [
                    {
                        name: '业主服务均数',
                        type: 'line',
                        smooth: true,
                        showAllSymbol: true,
                        symbol: 'emptyCircle',
                        symbolSize: 15,
                        data: lineData
                    },
                    {
                        name: '业主需求解决率',
                        type: 'bar',
                        barWidth: 10,
                        itemStyle: {
                            borderRadius: 5,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#14c8d4' },
                                { offset: 1, color: '#43eec6' }
                            ])
                        },
                        data: barData
                    },
                    {
                        name: '业主服务均数',
                        type: 'bar',
                        barGap: '-100%',
                        barWidth: 10,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(20,200,212,0.5)' },
                                { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
                                { offset: 1, color: 'rgba(20,200,212,0)' }
                            ])
                        },
                        z: -12,
                        data: lineData
                    },
                    {
                        name: 'dotted',
                        type: 'pictorialBar',
                        symbol: 'rect',
                        itemStyle: {
                            color: '#0f375f'
                        },
                        symbolRepeat: true,
                        symbolSize: [12, 4],
                        symbolMargin: 1,
                        z: -10,
                        data: lineData
                    }
                ]
            };

            option && myChart.setOption(option);
        }

        return {}
    }
}
</script>

<style lang="less" scoped>
*{
    background: #5c9bdb5a;
}
</style>